<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <ul>
        <li id="a">11</li>
        <li id="b">22</li>
        <li id="c">33</li>
        <li id="d">44</li>
    </ul>

    <script>

        // 获取多个标签   querySelectorAll()   得到的是一个伪数组
        // 循环绑定事件   
        //      事件函数是异步的  循环只能把事件给绑定上  (i就没用了)
        // this  在事件函数中  点谁就指向





        // a.onclick = function () {
        //     alert(1)
        // }
        // b.onclick = function () {
        //     alert(1)
        // }
        // c.onclick = function () {
        //     alert(1)
        // }
        // d.onclick = function () {
        //     alert(1)
        // }

        // 获取所有的
        var oLis = document.querySelectorAll('li');
        console.log(oLis);   // 得到的是一个伪数组   --- 有长度有下标


        // 给数组中的每一个对象都要绑定事件
        for (var i = 0; i < oLis.length; i++) {
            oLis[i].onclick = function () {
                // alert(1)
                // console.log(i);   // 4
                console.log(this);   //
            }
        }

    </script>

</body>

</html>